<template>
    <div class="section-wrap"
         style="height:100%;">
        <vue-better-scroll class="wrapper"
                           ref="scrollqq"
                           :scrollbar="scrollbarObj"
                           :pullDownRefresh="pullDownRefreshObj"
                           :pullUpLoad="pullUpLoadObj"
                           :startY="parseInt(startY)"
                           @pullingUp="onPullingUp">
            <div class="form-section">
                <tab active-color="#2269ff">
                    <tab-item selected
                              @on-item-click="$router.push('AccidentReport')">
                        <i>事故列表</i>
                    </tab-item>
                    <tab-item @on-item-click="$router.push('accidentStatistics')">
                        <i>事故统计</i>
                    </tab-item>
                </tab>
                <div class="mian_body">
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>单位名称</label>
                        </div>
                        <group>
                            <div>
                                <div class="right-select"
                                     @click="selectType">
                                    {{formData.deptName?formData.deptName:userdepartname}}
                                    <i class="iconfont icon-jinru rightmsg"></i>
                                </div>
                            </div>
                        </group>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>事故类型</label>
                        </div>
                        <group>
                            <div>
                                <popup-picker :data="list1"
                                              placeholder="请选择"
                                              :columns="1"
                                              v-model="troubletypedata"></popup-picker>
                            </div>
                        </group>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>开始时间</label>
                        </div>
                        <group>
                            <div>
                                <datetime format="YYYY-MM-DD"
                                          v-model="formData.startTime"></datetime>
                            </div>
                        </group>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>结束时间</label>
                        </div>
                        <group>
                            <div>
                                <datetime format="YYYY-MM-DD"
                                          v-model="formData.endTime"></datetime>
                            </div>
                        </group>
                    </div>
                    <p class="search-btn"
                       @click="search">查询</p>
                    <div class="total">事故起数: {{listAllCount}} 起</div>
                    <no-data v-if="acceptList.length==0 && flag"></no-data>
                    <dl v-for="(item,index) in acceptList"
                        :key="index"
                        @click="GetInfo(item.ID)">
                        <dt>{{item.AccidentName}}</dt>
                        <dd>{{item.AccidentDate.split(' ')[0]}}</dd>
                    </dl>
                </div>
                <div></div>
            </div>
        </vue-better-scroll>
        <myMenu :addPath="addPath"></myMenu>
        <companyProp :companyPropShow="companyPropShow"
                     :selectCompany="selectCompany"
                     business="GetHdProjectsAndFb"></companyProp>
    </div>
</template>

<script>
import { Tab, TabItem, PopupRadio, Datetime } from 'vux'
import VueBetterScroll from 'vue2-better-scroll'
import myMenu from '@/commonComponents/menu'
import { Casualties } from '@/api/api'
import noData from '@/commonComponents/noData/noData.vue'
import companyProp from '@/commonComponents/companyProp'

export default {
    name: 'App',
    data () {
        return {
            departsir: '',
            userdepartname: '',
            addPath: '',
            formData: {},
            flag: false,
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: false,
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            list1: [],
            listtrouble: [],
            troubletypedata: ['全部'],
            startY: 0, // 纵轴方向初始化位置
            scrollToX: 0,
            scrollToY: 0,
            scrollToTime: 700,
            acceptList: [], // 列表数据
            AccidentPersonInfo: [], // 详情页
            listAllCount: 0, // 列表总数
            param: {
                allowPaging: true,
                data: {
                    StartDate: '',
                    ProjectID: '',
                    AccidentType: '',
                    EndDate: '',
                    id: ''
                },
                pageIndex: 0,
                pageSize: 20
            },
            checkcompany: {},
            companyPropShow: false
        }
    },
    components: {
        VueBetterScroll,
        Tab,
        TabItem,
        noData,
        PopupRadio,
        Datetime,
        myMenu,
        companyProp
    },
    created () {
        this.$vux.loading.show({
            text: '加载中...'
        })
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        let userrole = this.userInfo.usermode
        this.userdepartname = this.userInfo.deptname
        if (userrole.indexOf('项目安全员') > -1) {
            this.addPath = '/addCasualties'
        } else {
            this.addPath = ''
        }

        this.formData.departID = this.userInfo.deptid
        this.departsir = this.userInfo.departsir

        if (this.$store.state.checkcompany.sourceType !== 'Casualties') {
            this.$store.state.checkcompany = {}
        }
        if (localStorage.getItem('casualSearch')) {
            this.formData = JSON.parse(localStorage.getItem('casualSearch'))
            localStorage.removeItem('listSearch')
            localStorage.removeItem('inputlist')
            this.formData.departID = this.$store.state.checkcompany.deptId
            this.formData.departName = this.$store.state.checkcompany.deptName
        }

        this.formData.startTime = this.getYear() + '-01-01'
        this.formData.endTime = this.getdatenew()

        this.TroubleType()
        this.getData()
    },
    methods: {
        // 获取事故类型
        TroubleType () {
            var that = this
            var params = {
                allowPaging: true,
                business: 'GetAccidentReportType',
                pageIndex: 0,
                pageSize: 20,
                tokenId: '',
                userId: this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params).then(res => {
                // console.log(res)
                let listArr = []
                let cateList = []
                if (res.data.code == 0) {
                    listArr = res.data.data
                    this.listtrouble = listArr
                }
                listArr.forEach((item, index) => {
                    cateList.push(item.AccidentTypeName)
                })

                this.list1 = cateList
            })
        },
        getData () {
            this.$vux.loading.show({
                text: '加载中...'
            })
            // 根据事故类型名称查询id
            this.listtrouble.forEach(res => {
                if (res.AccidentTypeName == this.troubletypedata) {
                    this.troubletypeCode = res.AccidentType
                }
            })

            this.param.pageIndex = 0
            this.param.data.AccidentType = this.troubletypeCode
            this.param.data.EndDate = this.formData.endTime
            // this.param.data.ProjectID = this.$store.state.checkcompany.deptId
            this.param.data.StartDate = this.formData.startTime
            this.param.data.id = ''
            Casualties(this.param)
                .then(res => {
                    if (res.code == 0) {
                        this.acceptList = res.data
                        // 计算上报次数总合
                        this.listAllCount = res.count
                        this.$vux.loading.hide()
                    } else {
                        this.$vux.toast.text(res.data.info)
                    }
                })
                .catch(() => { })
            this.$vux.loading.hide()
        },
        selectType () {
            //  this.$router.push({path:"hidechecklook"})
            // localStorage.setItem('casualSearch', JSON.stringify(this.formData))
            // this.$router.push({
            //     path: '/addCompany3',
            //     query: { sourceType: 'Casualties' }
            // })
            this.companyPropShow = true
        },
        getdatenew () {
            var date = new Date()
            var seperator1 = '-'
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var strDate = date.getDate()
            if (month >= 1 && month <= 9) {
                month = '0' + month
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = '0' + strDate
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate
            return currentdate
        },
        getYear () {
            var date = new Date()
            var year = date.getFullYear()
            return year
        },
        onPullingDown () {
            console.log('xl')
        },
        onPullingUp () {
            this.param.pageIndex++
            Casualties(this.param)
                .then(res => {
                    if (res.code === 0) {
                        this.acceptList = this.acceptList.concat(res.data)
                        this.listCount = this.acceptList.length
                        this.listAllCount = res.count
                        if (this.listCount < this.listAllCount) {
                            this.$refs[`scrollqq`].forceUpdate(true)
                        } else {
                            this.$refs[`scrollqq`].forceUpdate(false)
                        }
                    }
                })
                .catch(() => {
                    console.log('error')
                })
                .finally(() => {
                    this.$vux.loading.hide()
                    this.flag = true
                })
        },
        onClick () {
            this.param.data.name = this.name
            this.getData()
        },
        submit () {
            console.log(this.formData)
        },
        search () {
            this.getData()
        },
        GetInfo (val) {
            this.$router.push({
                path: 'addCasualties',
                query: { urltype: '1', id: val }
            })
        },
        selectCompany (item) {
            this.companyPropShow = false
            this.formData.deptName = item.Name
            this.param.data.ProjectID = item.Id
        }
    }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';
.mian_body {
    height: 100%;
    overflow: scroll;
    width: 100%;
}
.form-section {
    // position: fixed;
    // top: 0px;
    // width: 100%;
    // height: 100%;
    // left: 0;

    // bottom: 100px;
    .vux-tab-selected {
        i {
            font-size: 15px;
            color: #2269ff;
            font-weight: bold;
        }
    }
    .total {
        line-height: 40px;
        font-size: 12px;
        color: #2269ff;
        text-align: right;
        padding-right: 20px;
        background: #ebeef3;
    }
    .search-btn {
        width: 200px;
        line-height: 40px;
        border-radius: 20px;
        margin: 23px auto;
        text-align: center;
        color: #fff;
        background: #2269ff;
    }
    .search-btn:hover {
        opacity: 8;
    }
    dl {
        border-bottom: 1px solid #f0f0f2;
        font-size: 14px;
        margin-left: 20px;
        overflow: hidden;
        background: url(../../../../static/images/5.png) no-repeat right 20px
            center;
        background-size: 8px 14px;
        position: relative;
        padding: 18px 0 10px 0;
        dt {
            width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        dt {
            font-size: 14px;
            line-height: 18px;
            color: #333;
        }
        dd {
            font-size: 14px;
            line-height: 24px;
            color: #999;
        }
    }
}

.right-select {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    padding-right: 0px;
    height: 20px;
    overflow: hidden;
    width: 180px;
    position: relative;
    padding-right: 0px;
    margin-right: -3px;
    line-height: 20px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 20px;
    .icon-jinru {
        position: absolute;
        right: 0;
    }
}

.icon-jinru {
    color: #c8c8cd;
}
</style>
